<template>
  <div id="Product">
    <section id="selling-product" class="single-product mt-0 mt-md-5">
      <div class="container-lg">
        <nav class="breadcrumb">
          <a class="breadcrumb-item" href="/Organic/home">主页</a>
          <a class="breadcrumb-item" href="/Organic/product">页面</a>
          <span class="breadcrumb-item active" aria-current="page">商品详情</span>
        </nav>
        <div class="row g-5">
          <div class="col-lg-7">
            <div class="row flex-column-reverse flex-lg-row">
              <div class="col-md-12 col-lg-2">
                <!-- product-thumbnail-slider -->
                <div class="swiper product-thumbnail-slider">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img :src="'http://localhost:90'+product.imgLink" alt="" class="thumb-image img-fluid">
                    </div>
                    <div class="swiper-slide" v-for="(item,index) in product.productImgs" :key="index">
                      <img :src="'http://localhost:90'+item.imgLink" alt="" class="thumb-image img-fluid">
                    </div>
                  </div>
                </div>
                <!-- / product-thumbnail-slider -->
              </div>
              <div class="col-md-12 col-lg-10">
                <!-- product-large-slider -->
                <div class="swiper product-large-slider">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" >
                      <div class="image-zoom" data-scale="2.5" data-image="'http://localhost:90'+product.imgLink"><img
                          :src="'http://localhost:90'+product.imgLink" alt="product-large" class="img-fluid">
                      </div>
                    </div>
                    <div class="swiper-slide" v-for="(item,index) in product.productImgs" :key="index">
                      <div class="image-zoom" data-scale="2.5" data-image="'http://localhost:90'+item.imgLink"><img
                          :src="'http://localhost:90'+item.imgLink" alt="product-large" class="img-fluid">
                      </div>
                    </div>
                  </div>
                  <div class="swiper-pagination"></div>
                </div>
                <!-- / product-large-slider -->
              </div>
            </div>
          </div>
          <div class="col-lg-5">
            <div class="product-info">
              <div class="element-header">
                <h2 itemprop="name">{{product.name}}</h2>
                <div class="rating-container d-flex gap-0 align-items-center">
                  <span class="rating me-2">
                    <svg width="24" height="24" class="text-warning"><use xlink:href="#star-full"></use></svg>
                    <svg width="24" height="24" class="text-warning"><use xlink:href="#star-full"></use></svg>
                    <svg width="24" height="24" class="text-warning"><use xlink:href="#star-full"></use></svg>
                    <svg width="24" height="24" class="text-warning"><use xlink:href="#star-full"></use></svg>
                    <svg width="24" height="24" class="text-warning"><use xlink:href="#star-half"></use></svg>
                  </span>
                  <span class="rating-count">(4.5)</span>
                </div>
              </div>
              <div class="product-price pt-3 pb-3">
                <strong class="text-primary display-6 fw-bold">￥{{product.price}}</strong>
              </div>
              <p>Justo, cum feugiat imperdiet nulla molestie ac vulputate scelerisque amet. Bibendum adipiscing platea blandit sit sed quam semper rhoncus. Diam ultrices maecenas consequat eu tortor orci, cras lectus mauris, cras egestas quam venenatis neque.</p>
              <div class="cart-wrap py-4">

                <div class="swatch" data-option-index="1">
                  <h6 class="item-title text-uppercase text-dark">规格:</h6>
                  <input type="radio" class="btn-check" name="options-size" id="option9" autocomplete="off" checked>
                  <label class="btn" for="option9">{{product.unit}}</label>


                </div>
                <div class="product-quantity pt-3">
                  <div class="stock-number text-dark"><em>{{product.stock}}库存</em></div>
                  <div class="stock-button-wrap">

                    <div class="input-group product-qty w-50">
                        <span class="input-group-btn">
                          <button type="button" class="quantity-left-minus btn btn-light btn-number" data-type="minus" @click="updateQuantity(product, 'minus')">
                            <svg width="16" height="16">
                              <use xlink:href="#minus"></use>
                            </svg>
                          </button>
                        </span>
                      <input type="text"  class="form-control input-number text-center" :value="num">
                      <span class="input-group-btn">
                          <button type="button" class="quantity-right-plus btn btn-light btn-number" data-type="plus" @click="updateQuantity(product, 'plus')" data-field="">
                            <svg width="16" height="16">
                              <use xlink:href="#plus"></use>
                            </svg>
                          </button>
                        </span>
                    </div>
                    <div class="qty-button d-flex flex-wrap pt-3">
<!--                      <button type="submit" class="btn btn-primary py-3 px-4 text-uppercase me-3 mt-3">Buy now</button>-->
                      <button type="submit" name="add-to-cart" value="1269" class="btn btn-dark py-3 px-4 text-uppercase mt-3" @click="addToCart">加入购物车</button>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="product-info-tabs py-5">
      <div class="container-lg">
        <div class="row">
          <div>
            <div class="nav nav-pills justify-content-center" id="v-pills-tab" role="tablist" aria-orientation="horizontal">
              <button class="nav-link text-start active" id="v-pills-description-tab" data-bs-toggle="pill" data-bs-target="#v-pills-description" type="button" role="tab" aria-controls="v-pills-description" aria-selected="true">介绍</button>
              <button class="nav-link text-start" id="v-pills-additional-tab" data-bs-toggle="pill" data-bs-target="#v-pills-additional" type="button" role="tab" aria-controls="v-pills-additional" aria-selected="false">其他信息</button>
              <button class="nav-link text-start" id="v-pills-reviews-tab" data-bs-toggle="pill" data-bs-target="#v-pills-reviews" type="button" role="tab" aria-controls="v-pills-reviews" aria-selected="false">客户评价</button>
            </div>
            <div class="tab-content py-4" id="v-pills-tabContent">
              <div class="tab-pane fade show active" id="v-pills-description" role="tabpanel" aria-labelledby="v-pills-description-tab" tabindex="0">
                <h5>Product Description</h5>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.</p>
                <ul style="list-style-type:disc;" class="list-unstyled ps-4">
                  <li>Donec nec justo eget felis facilisis fermentum.</li>
                  <li>Suspendisse urna viverra non, semper suscipit pede.</li>
                  <li>Aliquam porttitor mauris sit amet orci.</li>
                </ul>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. </p>
              </div>
              <div class="tab-pane fade" id="v-pills-additional" role="tabpanel" aria-labelledby="v-pills-additional-tab" tabindex="0">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla dicta aliquam exercitationem optio error. Molestiae dicta iusto ab vero quidem blanditiis obcaecati nesciunt aperiam repellat, suscipit atque assumenda temporibus aliquam.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              </div>
              <div class="tab-pane fade" id="v-pills-reviews" role="tabpanel" aria-labelledby="v-pills-reviews-tab" tabindex="0">
                <div class="review-box d-flex flex-wrap">
                  <div class="col-lg-6 d-flex flex-wrap gap-3" v-for="item in product.productComments" :key="item.commentId">
                    <div class="col-md-2">
                      <div class="image-holder">
                        <img :src="'http://localhost:90'+item.consumer.avatarImg" alt="review" class="img-fluid rounded-circle">
                      </div>
                    </div>
                    <div class="col-md-8">
                      <div class="review-content">
                        <div class="rating-container d-flex align-items-center">
                          <span class="rating me-2">
                            <svg width="24" height="24" class="text-warning"><use xlink:href="#star-full"></use></svg>
                            <svg width="24" height="24" class="text-warning"><use xlink:href="#star-full"></use></svg>
                            <svg width="24" height="24" class="text-warning"><use xlink:href="#star-full"></use></svg>
                            <svg width="24" height="24" class="text-warning"><use xlink:href="#star-full"></use></svg>
                            <svg width="24" height="24" class="text-warning"><use xlink:href="#star-half"></use></svg>
                          </span>
                          <span class="rating-count">(4.5)</span>
                        </div>
                        <div class="review-header">
                          <span class="author-name">{{item.consumer.nickName}}</span>
                          <br>
                          <span class="review-date">评论时间：{{item.createTime}}</span>
                        </div>
                        <p>{{item.content}}</p>
                      </div>
                    </div>
                  </div>

                </div>

                <div class="add-review mt-5">
                  <h3>Add a review</h3>
                  <p>Your email address will not be published. Required fields are marked *</p>
                  <form id="form" class="form-group">

                    <div class="pb-3">
                      <div class="review-rating">
                        <span>Your rating *</span>
                        <div class="rating-container d-flex align-items-center">
                          <input type="radio" class="btn-check" name="options-rating" id="rating1" autocomplete="off" checked>
                          <label class="btn" for="rating1"><svg width="24" height="24" class="text-warning"><use xlink:href="#star-full"></use></svg></label>

                          <input type="radio" class="btn-check" name="options-rating" id="rating2" autocomplete="off">
                          <label class="btn" for="rating2"><svg width="24" height="24" class="text-warning"><use xlink:href="#star-full"></use></svg></label>

                          <input type="radio" class="btn-check" name="options-rating" id="rating3" autocomplete="off">
                          <label class="btn" for="rating3"><svg width="24" height="24" class="text-warning"><use xlink:href="#star-full"></use></svg></label>

                          <input type="radio" class="btn-check" name="options-rating" id="rating4" autocomplete="off">
                          <label class="btn" for="rating4"><svg width="24" height="24" class="text-warning"><use xlink:href="#star-full"></use></svg></label>

                          <input type="radio" class="btn-check" name="options-rating" id="rating5" autocomplete="off">
                          <label class="btn" for="rating5"><svg width="24" height="24" class="text-warning"><use xlink:href="#star-full"></use></svg></label>
                        </div>
                      </div>
                    </div>
                    <div class="pb-3">
                      <input type="file" class="form-control" data-text="Choose your file">
                    </div>
                    <div class="pb-3">
                      <label>Your Review *</label>
                      <textarea class="form-control" placeholder="Write your review here"></textarea>
                    </div>
                    <div class="pb-3">
                      <label>Your Name *</label>
                      <input type="text" name="name" placeholder="Write your name here" class="form-control">
                    </div>
                    <div class="pb-3">
                      <label>Your Email *</label>
                      <input type="text" name="email" placeholder="Write your email here" class="form-control">
                    </div>
                    <div class="pb-3">
                      <label>
                        <input type="checkbox" required="">
                        <span class="label-body">Save my name, email, and website in this browser for the next
                          time.</span>
                      </label>
                    </div>
                    <button type="submit" name="submit"
                            class="btn btn-dark btn-large text-uppercase w-100">Submit</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Product',
  components: {},
  props: {},
  data () {
    return {
      user:{},
      product:{num:1},
      num: 1,
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    initUser(){
      this.user = this.$store.state.user
    },
    initProduct(){
      this.product = this.$store.state.product
    },
    updateQuantity(product, type) {
      if (type === 'minus') {
        this.num = this.num - 1 < 1 ? 1 : this.num - 1;
      } else if (type === 'plus') {
        this.num = this.num + 1;
      }
      this.$forceUpdate(); // 强制重新渲染，触发计算属性更新
    },
    addToCart(){
      let formData = new FormData();
      formData.append('productId', this.product.productId);
      formData.append('num', this.num);
      formData.append('consumerId', this.user.consumerId);
      this.$axios.post('http://localhost:8090/cart/addToCart', formData).then(({ data }) => {
        if (data) {
          this.$notify({
            title: '添加成功',
            message: '添加成功！',
            type: 'success'
          });
          this.intCart()
        }else{
          this.$notify({
            title: '添加失败',
            message: '添加失败，请稍后重试',
            type: 'warning'
          });
        }
      });
    },
    intCart(){
      this.$axios.get('http://localhost:8090/cart/getCartByConsumerId?consumerId=' + this.user.consumerId).then(({ data }) => {
        // eslint-disable-next-line no-empty
        if(data !== null && data !== undefined ){
          this.carts = data;
          console.log(this.carts);
          this.$store.commit('initCarts', this.carts)
          console.log(this.$store.state.carts);
        }
      })
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.initUser()
    this.initProduct()
    this.intCart()
  },
  // 生命周期 - 创建之前
  beforeCreate () {},
  // 生命周期 - 挂载之前
  beforeMount () {},
  // 生命周期 - 更新之前
  beforeUpdate () {},
  // 生命周期 - 更新之后
  updated () {},
  // 生命周期 - 销毁之前
  beforeDestroy () {},
  // 生命周期 - 销毁完成
  destroyed () {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated () {}
}
</script>

<style scoped>

</style>
